<template>
  <div class="news">
    <h2>{{news.title}}</h2>
    <div style="color: #bdc3c7">
      <p>爱泡饭</p>
      <p>{{news.add_time_format}}</p>
    </div>
    <div class="news_center">
    <div v-html="news.content" class="content"></div>
    </div>
  </div>
</template>

<script>
export default {
  data: () => {
    return {

        id:"",
        news:{}
    };
  },
  methods:{
  async  getNews(id){
   let info= await  this.$api.getNews(id)

   this.news=info.data.data
    this.news.content = this.news.content.replace(/\<section/gi, "<section style='width:100%;display:flex;justify-content:center;flex-direction: column;align-items: center;!important;'");
     this.news.content = this.news.content.replace(/\<img/gi, "<img style='width:100% !important;'");
      // this.news.content = this.news.content.replace(/\<p/gi, "<p style='display:flex;justify-content:center !important;'");
    }
  },
  computed:{

  },
  mounted:function(){
    this.id=this.$route.query.id
	console.log(this.$route)
    this.getNews(this.id)
    
  },
  
};
</script>

<style scoped>
.news {
  width: 60%;
  margin: 150px auto;
  min-height: 50vh;
}
.news h2 {
  font-weight: 400;
  margin: 40px auto;
}
.news_center p {

  display: flex;
  justify-content: center;
}
img{
margin: auto;
width: 300px;
object-fit: cover;
}
.content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 40px;
width: 100%;

box-sizing: border-box;
}
.content section{
 display: flex;
 justify-content: center;
}
@media screen and (max-width: 1255px) {
.news{
  width:80%;
   margin: 80px auto;
}
.img_100{
  width:100%;
}
.content{
  font-size: 14px;
}
}
</style>